
<template>
  <div class="app">
    <topbar/>
    <Kefu/>
    <div class="gap40"></div>
    <!--<div class="menubg">-->
      <!--<div class="container" >-->
        <!--<div class="menupart">-->
          <!--<div class="zhishibar">知识分类</div>-->
          <!--<div class="menu1">-->
            <!--<li v-for="(oneMenu,index) in menuList">-->
              <!--<span @click="showToggle('twoMenu'+index)">{{oneMenu.oneLevelName}}</span>-->
              <!--<div class="menu2" :id="'twoMenu'+index" v-show="false">-->
                <!--<div class="onepart" v-for="(twoMenu,index) in oneMenu.dataTwo">-->
                  <!--<div class="m2"><nuxt-link :to="'/list?id='+twoMenu.oneUniqueCode" >{{twoMenu.oneName}} ></nuxt-link></div>-->
                  <!--<div class="m3">-->
                    <!--<nuxt-link  :to="'/list?id='+u.uniqueCode" v-for="(u,i) in twoMenu.oneValue">{{u.name}}</nuxt-link>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</li>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

    <div class="menubg">
      <div class="container" >
        <div class="menupart">
          <div class="rightgap" @click="goNewwenku"></div>
          <div class="zhishibar">知识分类</div>
          <div class="menu1">
            <li v-for="(oneMenu,index) in menuList" :key="index">
              <!--            <span @click="showToggle('twoMenu'+index)">{{oneMenu.oneLevelName}}</span> -->
              <span v-for="(twoMenu,index) in oneMenu.dataTwo" :key="index">
                <nuxt-link :to="'/list/id?id='+twoMenu.oneUniqueCode">{{twoMenu.oneName}}</nuxt-link>
                <span v-show="index < oneMenu.dataTwo.length-1" style="padding-right:5px;">/</span>
              </span>
              <div class="menu2" >
                <div class="onepart" v-for="(twoMenu,index) in oneMenu.dataTwo" :key="index">
                  <div class="m2"><nuxt-link :to="'/list/id?id='+twoMenu.oneUniqueCode" >{{twoMenu.oneName}} ></nuxt-link></div>
                  <div class="m3">
                    <nuxt-link  :to="'/list/id?id='+u.uniqueCode" v-for="(u,i) in twoMenu.oneValue" :key="i">{{u.name}}</nuxt-link>
                  </div>
                </div>
              </div>
            </li>

          </div>
        </div>
      </div>
    </div>




    <div class="container" >

      <div class="part" v-for="(oneCate,index) in cateList">
        <div class="tit">{{oneCate.oneName}}
          <div class="fr font14"><nuxt-link :to="'/list/id?id='+oneCate.uniqueCode" >更多</nuxt-link></div>
        </div>

        <div class="one" v-for="(twoCate,index) in oneCate.dateTwo">
          <nuxt-link :to="'/list/id?id='+twoCate.uniqueCode">
          <div class="a1">
            <div class="a11">
              <img v-bind:src="twoCate.poster"/>
            </div>
            <div class="c2title">{{twoCate.twoLevelName}}</div>
            <div class="r">
              <div class="title">{{twoCate.describle}}</div>
              <div class="tj">{{twoCate.articleNum}}篇文章</div>
            </div>
          </div>
          </nuxt-link>
          <!--<div class="a2">-->
            <!--<li v-for="(threeLevel,index) in twoCate.threeLevelName"><nuxt-link :to="'/list/id?id='+threeLevel.uniqueCode">{{threeLevel.name}}</nuxt-link></li>-->
          <!--</div>-->
          <div class="a2">
            <div v-for="(threeLevel,index) in twoCate.threeLevelName">
              <nuxt-link :to="'/list/id?id='+threeLevel.uniqueCode"><li>{{threeLevel.name}}</li></nuxt-link>
            </div>
          </div>
          <div class="a3">
            <li v-for="(article,index) in twoCate.list"><nuxt-link target="_blank" :to="'/article/?collkey='+ article.collKey">{{article.title}}</nuxt-link></li>
          </div>
        </div>

      </div>
      <el-container v-loading="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.8)"></el-container>
      <div class="listmore" @click="getMore()" v-show="page<5">查看更多</div>

    </div>

    <Bottombar/>
  </div>
</template>

<script>

  import Topbar from '~/components/Topbar.vue'
  import Kefu from '~/components/kefu.vue'
  import Bottombar from '~/components/Bottombar.vue'
  import axios from 'axios'
  import qs from 'qs'
  export default {
    components: {
      Topbar,
      Kefu,
      Bottombar
    },
    data(){
      return{
        page:0,
        user:{},
        fullscreenLoading:false,
        menuList:[],
        cateList:[],
      }
    },

    mounted(){
      //this.user =  JSON.parse(localStorage.getItem("user"));
      this.getSessionUser();
      this.getMenuList();
      this.getCateList();
      this.insertBrowseRecord();

    },

    methods:{
      getSessionUser(){

        let key=localStorage.getItem("user_unique_code");
        if(key!=null && key!="" && key!=undefined){
          console.log("key "+key)
          axios.post('https://wenku.qikan.com:11000/admin/lib/getTokenByUserId.html',qs.stringify({'key':key})
          )
            .then((response)=>{
              console.log("resultuser "+response.data);
              let result= response.data;
              if(result.code==1){
                console.log(result.data.trim())
                this.user=JSON.parse(result.data.trim());
                console.info("usermsg "+this.user)
                // if(this.user!=null && this.user!="" && this.user!=undefined){
                //   // this.poster=this.user.poster;
                //   // console.log("uuaa  "+this.user.mobile)
                //   // this.isLogin=true;
                // }

              }else{
                // this.getMenuList();
                // this.getCateList();
                // this.insertBrowseRecord();
              }
            })
            .catch((error)=>{
              console.log(error)
            })
        }else{
          return null;
        }
      },
      insertBrowseRecord(){//新增首页浏览记录
        var vm=this;
        var userCode = '';
        if(vm.user != null && vm.user != '' && vm.user != undefined){
          userCode = vm.user.unique_code
        }
        axios.get('https://wenku.qikan.com:11000/statistic/insertBrowseRecord.html?type=1&userCode='+userCode)
          .then(function(response){
            console.log(response);
          })
      },
      getMore(){
        this.page = this.page+1;
        this.getMoreCateList();
      },
      getMenuList(){
        var vm=this;
        axios.get('https://wenku.qikan.com:11000/index/cate/menu')
          .then(function(response){
            console.log(response);
            vm.menuList=response.data.data;
          })
      },

      getCateList(){
        var vm=this;
        // axios.get('https://wenku.qikan.com:11000/index/cate/list?page='+vm.page)
        // vm.fullscreenLoading = true;
        axios.get('https://wenku.qikan.com:11000/index/cate/list?page='+vm.page)
          .then(function(response){
            console.log(response);
            vm.cateList=response.data.data;
            // vm.fullscreenLoading = false;
          })
      },

      getMoreCateList(){
        var vm=this;
        vm.fullscreenLoading = true;
        // axios.get('https://wenku.qikan.com:11000/index/cate/list?page='+vm.page)
        axios.get('https://wenku.qikan.com:11000/index/cate/list?page='+vm.page)
          .then(function(res){
            console.log(res);
            vm.cateList = [...vm.cateList,...res.data.data];
            vm.fullscreenLoading = false;
          })
      },

      showToggle(obj){
        const style = document.getElementById(obj).style.display;
        if (style == "none") {//展开二级
          var doms = document.getElementsByClassName("menu2");
          for (var i = 0; i < doms.length; i++) {
            var id1 = doms[i].id;
            if (id1 == obj) {
              document.getElementById(id1).style.display = "block";
            } else {
              document.getElementById(id1).style.display = "none";
            }
          }
        } else {//收起二级
          document.getElementById(obj).style.display = "none";
        }
      },goNewwenku(){
        this.$router.push({path:'/newwenku'});
      },


    }
  }
</script>

<style scoped>
  .gap40{ width: 100%; height: 40px; background-color: #fff; }
  /*.menubg{ width: 100%; height: 376px; background: url('../assets/images/menubg.png') center top no-repeat; }*/
  .menubg{ width: 100%; height: 376px; background: url('../assets/images/menubg.png') center top no-repeat; background-size: 1440px 376px; }
  .menupart{ width: 100%; height:376px; position: relative; }
  .rightgap{ width: 880px;  float: right; height: 376px;}
  /*.zhishibar{ position: absolute;z-index: 2; top: -40px; height: 40px; left: 0; width: 260px;background-image: linear-gradient(-180deg, #1C7DE1 0%, #1674D4 52%, #0866C2 98%, rgba(232,56,41,0.80) 100%);border: 1px solid #0D6EB8;box-shadow: inset 0 1px 0 0 #358BE5;font-size: 14px;*/
    /*color: #FFFFFF; line-height: 40px; padding-left: 39px; }*/
  .zhishibar{ position: absolute;z-index: 2; top: -40px; height: 40px; left: 0; width: 260px;background-image: linear-gradient(-180deg, #1C7DE1 0%, #1674D4 52%, #0866C2 98%, rgba(232,56,41,0.80) 100%);border: 1px solid #0D6EB8;box-shadow: inset 0 1px 0 0 #358BE5;font-size: 14px;
    color: #FFFFFF; line-height: 40px; padding-left: 39px;  border-top-right-radius: 4px;  border-top-left-radius: 4px;}
  .zhishibar:after{content: ''; background:url('../assets/images/icon-menulist.png') left top no-repeat; background-size: 19px 14px; position: absolute;z-index: 3; left:10px; top:14px; width: 19px; height: 14px;}


  /*.menu1{ width: 260px; height: 376px; background-color: #fff; padding:0 7px 0 11px;}*/
  /*.menu1 li{ width:242px ; height: 38px; line-height: 38px; border-bottom: 1px solid #F0F2F7; background:url('../assets/images/arrow-right-blue.png') right center no-repeat; background-size: 6px 13px;}*/
  /*.menu1 li span{color:#225599; width: 100%; height: 100%; display: block; cursor: pointer;}*/
  /*.menu1 li span:hover{color: #0d5fcd;}*/
  /*.menu2{width: 480px; height: 376px; background-color: #fff; position: absolute; left: 260px; top: 0; padding: 10px 39px;box-shadow: 1px 0 4px 0 rgba(0,0,0,0.50);*/
    /*border-radius: 3px; }*/
  /*.menu2 .onepart{ width: 100%; line-height: 30px; overflow: hidden; clear: both;}*/
  /*.menu2 .onepart a{color:#9AA2B4; font-size: 14px;}*/
  /*.menu2 .onepart .m2{ display: inline-block;float: left; line-height: 30px; width: 90px; }*/
  /*.menu2 .onepart .m2 a{ padding-right: 10px; }*/
  /*.menu2 .onepart .m3{ display: inline-block;float: left; line-height: 30px;  width:calc( 100% - 90px ); }*/
  /*.menu2 .onepart .m3 a{padding:0 10px; border-left:1px solid #EBEBEB;white-space:nowrap; display: inline-block;line-height: 20px; margin:5px 0;}*/
  /*.menu2 .onepart .m3 a:hover,.menu2 .onepart .m2 a:hover{color: #0d5fcd;}*/

  .menu1 { width: 260px; height: 376px; background-color: #fff;}
  .menu1 li{ width:260px ; height: 38px; line-height: 38px; border-bottom: 1px solid #F0F2F7; background:url('../assets/images/arrow-right-blue.png') 242px center no-repeat; background-size: 6px 13px;  padding:0 7px 0 11px; font-size: 14px;}
  .menu1 li:hover{background: #f6f6f6 url('../assets/images/arrow-right-blue.png') 242px center no-repeat; background-size: 6px 13px; ;}
  .menu1 li span{color:#225599; height: 100%; display: inline-block; cursor: pointer;}
  .menu1 li span a{color:#225599;}
  .menu1 li span a:hover{color: #0d5fcd ;text-decoration: underline;}
  /*.menu1 li span:not(:last-child):after{content:"/"; width:7px; height: 100%; }*/
  /*.menu1 li span:after{content:"/"; width:7px; height: 100%;}*/
  /*.menu1 li span:last-child:after{content:"";width:7px; height: 100%;}*/
  /*   .menu1 li span:hover{color: #0d5fcd;} */
  .menu1 > li > .menu2 {display: none;width: 480px; height: 376px; background-color: #fff; position: absolute; left: 260px; top: 0; padding: 10px 39px;box-shadow: 1px 0 4px 0 rgba(0,0,0,0.50); border-radius: 3px;}
  .menu1 > li:hover .menu2 {display: block;}

  .menu2 .onepart{ width: 100%; line-height: 30px; overflow: hidden; clear: both;}
  .menu2 .onepart a{color:#9AA2B4; font-size: 14px;}
  .menu2 .onepart .m2{ display: inline-block;float: left; line-height: 30px; width: 90px; }
  .menu2 .onepart .m2 a{ padding-right: 10px; }
  .menu2 .onepart .m3{ display: inline-block;float: left; line-height: 30px;  width:calc( 100% - 90px ); }
  .menu2 .onepart .m3 a{padding:0 10px; border-left:1px solid #EBEBEB;white-space:nowrap; display: inline-block;line-height: 20px; margin:5px 0;}
  .menu2 .onepart .m3 a:hover,.menu2 .onepart .m2 a:hover{color: #0d5fcd ;text-decoration: underline;}




  .part{ width: 100%; height: 320px; margin-top: 10px; background-color: #fff;}
  .part .tit{ width: 100%; height: 44px; line-height: 44px; font-size: 16px; color: #225599; padding: 0 15px; clear: both; font-weight: 600;border-bottom:1px solid #e5e5e5;}
  .part .tit a{color:#225599;}
  .part .one{ width: 25%; padding: 10px; float: left; display: inline-block; font-size: 12px; }
  /*.part .one .a1{ width: 100%; height: 74px;position: relative;}*/
  /*!*.part .one .a1 img{ width: 127px; height: 74px; display: inline-block;float: left; margin-right: 8px; }*!*/
  /*.part .one .a1 img{ width: 127px; height: 74px; display: inline-block;float: left; margin-right: 8px;  border-radius: 3px;}*/
  .part .one .a1{ width: 100%; height: 77px;position: relative;}
  .part .one .a1 img{ width: 127px; height: 77px; display: inline-block;float: left; margin-right: 8px;  border-radius: 3px;}
  .part .one .a1 img:hover{transform: scale(1.2);transition: all .3s}
  .part .one .a1 .r{ width: calc( 100% - 135px ); height: 74px;  display: inline-block;float: left; }
  .part .one:hover{ box-shadow:#666 0px 0px 10px;transition: .3s}
  .part .one .a3 li:hover a{color:#698EBF}
  /*.part .one .a1 .r .title{ width: 130px; line-height: 18px; color: #222; max-height: 54px;font-size: 12px;*/
    /*overflow : hidden;*/
    /*text-overflow: ellipsis;*/
    /*display: -webkit-box;*/
    /*!* autoprefixer: off; *!*/
    /*-webkit-box-orient: vertical;*/
    /*!* autoprefixer: on; *!*/
    /*-webkit-line-clamp: 3;*/
  /*}*/
  .part .one .a1 .r .title{ width: 130px; line-height: 18px; color: #222; max-height: 54px;font-size: 12px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* autoprefixer: off; */
    -webkit-box-orient: vertical;
    /* autoprefixer: on; */
    -webkit-line-clamp: 3;
    font-weight: 600;
  }
  /*.part .one .a1 .r .title a{color:#222; font-size: 12px;}*/
  .part .one .a1 .r .tj{ border: 1px solid #ADADBC;border-radius: 3px; height: 20px; line-height: 18px; padding: 0 6px;width: 130px;text-align: center; color:#B2B2C0;margin-top:4px;}
  .part .one .a1 .c2title{ position: absolute;left: 0; bottom: 0; height: 20px; line-height: 20px; font-size: 12px; width: 127px; color: #fff;text-align: center;background: rgba(51, 51, 51, 0.5); }
  /*.part .one .a2{ width: 100%; overflow: hidden; margin: 6px 0; clear: both; }*/
  /*.part .one .a2 li{ width: 130px; height: 30px;  display: inline-block;float: left; color: #698EBF; background-color: #eff6fb; margin-right: 5px;margin-bottom: 5px;  padding: 0; text-align: center; line-height: 30px;}*/
  /*.part .one .a2 li:nth-child(2n){ margin-right: 0;}*/
  /*.part .one .a2 li a{color: #698EBF; }*/
  .part .one .a2{ width: 102%; overflow: hidden; margin: 6px 0; clear: both; }
  .part .one .a2 li{ width: 130px; height: 30px;  display: inline-block;float: left; color: #698EBF; background-color: #cde; margin-right: 5px;margin-bottom: 5px;  padding: 0; text-align: center; line-height: 30px;border-radius: 3px;}
  .part .one .a2 li:nth-child(2n){ margin-right: 0;}
  .part .one .a2 li a{color: #698EBF; }
  .part .one .a1 .a11{overflow: hidden;width: 127px;height: 77px;float: left; margin-right: 8px;}
  .part .one .a3{ width: 100%; overflow: hidden; }
  .part .one .a3 li{ width: 100%; height: 24px; line-height: 24px;color: #8590A6; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;padding: 0;  }
  .part .one .a3 li a{ color: #8590A6;font-size:14px; }

  .font14{ font-size: 14px !important; }
  .listmore{color:#838A99; font-size: 14px; width: 70px; height: 40px; line-height: 40px; margin:15px auto 0;background: url('../assets/images/arrow-down.png') right center no-repeat; background-size: 11px 7px; cursor: pointer; }
</style>
